<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卖家管理中心 - 阿里宝宝</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <a href="index.html">
                        <i class="fas fa-shopping-bag"></i>
                        <span>阿里宝宝</span>
                    </a>
                </div>
                
                <nav class="nav">
                    <a href="seller-dashboard.html" class="nav-link active">
                        <i class="fas fa-tachometer-alt"></i>
                        商品管理
                    </a>
                </nav>
                
                <div class="header-actions">
                    <div class="user-menu">
                        <button class="user-btn" id="userMenuBtn">
                            <i class="fas fa-user-circle"></i>
                            <span id="userName">卖家用户</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="user-dropdown" id="userDropdown">
                            <a href="#" id="logoutBtn">
                                <i class="fas fa-sign-out-alt"></i>
                                退出登录 / Login / Logout
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>卖家管理中心</h1>
                <p>管理您的商品描述和查看销售情况</p>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalProducts">0</h3>
                        <p>商品总数</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalSales">0</h3>
                        <p>总销量</p>
                    </div>
                </div>
            </div>

            <!-- 购买趋势图表 -->
            <div class="chart-section">
                <div class="section-header">
                    <h2>购买趋势分析</h2>
                    <p style="color: #666; font-size: 14px;">按商品分类统计购买数量</p>
                </div>
                <div class="chart-container">
                    <canvas id="purchaseChart"></canvas>
                </div>
            </div>

            <!-- 商品管理 -->
            <div class="products-section">
                <div class="section-header">
                    <h2>我的商品</h2>
                    <p style="color: #666; font-size: 14px;">您可以编辑 / Edit商品描述，查看商品的购买量</p>
                </div>
                
                <div class="products-grid" id="productsGrid">
                    <div class="no-data">
                        <i class="fas fa-box"></i>
                        <p>加载中... / Loading...</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 编辑 / Edit商品描述模态框 -->
    <div class="modal" id="editProductModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑 / Edit商品描述</h3>
                <button class="modal-close" id="closeEditProductModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="modal-body">
                <form id="editProductForm">
                    <input type="hidden" id="editProductId" name="id">
                    
                    <div class="form-group">
                        <label for="editProductName">商品名称</label>
                        <input type="text" id="editProductName" name="name" readonly style="background-color: #f5f5f5;">
                    </div>
                    
                    <div class="form-group">
                        <label for="editProductDescription">商品描述 *</label>
                        <textarea id="editProductDescription" name="description" rows="6" placeholder="请输入商品详细描述..." required></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label>购买量</label>
                        <p id="productSalesCount" style="font-size: 18px; color: #ff6b35; font-weight: bold;">0</p>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelEditProduct">取消 / Cancel</button>
                <button type="submit" form="editProductForm" class="btn btn-primary">保存 / Save修改</button>
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <p>加载中... / Loading...</p>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast"></div>

    <!-- Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    
    <!-- JavaScript -->
    <script src="js/api.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/seller-dashboard.js"></script>
</body>
</html>
